<template>
    <div class="page">
        <div class="page_header" style="display: flex;">
            <div style="flex: 1 1 auto">
                <el-form ref="searchForm" :model="searchForm" style="display: flex;">
                    <el-form-item prop="trade_no">
                        <el-input v-model="searchForm.trade_no" placeholder="订单编号"></el-input>
                    </el-form-item>
                    <el-form-item prop="nickname">
                        <el-input v-model="searchForm.nickname" placeholder="微信名"></el-input>
                    </el-form-item>
                    <el-form-item prop="openid">
                        <el-input v-model="searchForm.openid" placeholder="openid"></el-input>
                    </el-form-item>
                    <el-form-item prop="phone">
                        <el-input v-model="searchForm.phone" placeholder="手机号"></el-input>
                    </el-form-item>
<!--                    <el-form-item prop="time">-->
<!--                        <el-date-picker-->
<!--                                v-model="searchForm.time"-->
<!--                                type="datetimerange"-->
<!--                                value-format="yyyy-MM-dd HH:mm:ss"-->
<!--                                start-placeholder="购买起期"-->
<!--                                end-placeholder="购买止期">-->
<!--                        </el-date-picker>-->
<!--                    </el-form-item>-->
                    <el-form-item prop="type">
                        <el-select v-model="searchForm.type" multiple placeholder="业务类型">
                            <el-option
                                v-for="item in laifei.order_type"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="vip_id">
                        <el-select v-model="searchForm.vip_id" multiple placeholder="会员类型">
                            <el-option
                                    v-for="item in laifei.vips"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="course_id">
                        <el-select v-model="searchForm.course_id" multiple placeholder="课程名称">
                            <el-option
                                    v-for="item in laifei.courses"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div style="flex:0 0 auto;">
                <el-button @click="$store.dispatch('tableReload')" type="primary">查询</el-button>
                <el-button @click="$store.dispatch('tableReset')">重置</el-button>
            </div>
        </div>
        <el-card class="page_body">
            <el-table
                    height="10"
                    class="page_body_table"
                    :data="common.tableData"
                    v-loading="common.loading"
                    border
                    stripe
                    style="width: 100%">
                <el-table-column prop="trade_no" width="140" label="订单编号"></el-table-column>
                <el-table-column prop="nickname" width="100" label="微信名称"></el-table-column>
                <el-table-column prop="openid" width="220" label="openid"></el-table-column>
                <el-table-column prop="phone" width="120" label="手机号"></el-table-column>
                <el-table-column prop="title" label="订单名称"></el-table-column>
                <el-table-column prop="subtitle" label="订单标题"></el-table-column>
                <el-table-column prop="pay_success_time" width="160" label="支付时间"></el-table-column>
                <el-table-column prop="total_fee" width="80" label="支付金额"></el-table-column>
                <el-table-column prop="start_date" width="160" label="有效起期"></el-table-column>
                <el-table-column prop="end_date" width="160" label="有效止期"></el-table-column>
                <el-table-column prop="status_str" width="60" label="状态"></el-table-column>
                <el-table-column label="操作" width="80" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="$refs.orderDetail.init(scope.row.order_id)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination class="page_body_pagination"></pagination>
        </el-card>
        <order-detail-dialog ref="orderDetail"></order-detail-dialog>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    import Pagination from "../Pagination";
    import OrderDetailDialog from "./Dialog/OrderDetailDialog";
    export default {
        name: "Orders",
        computed:{
            ...mapState(['common','laifei']),
        },
        components:{
            Pagination,
            OrderDetailDialog
        },
        data(){
            return {
                method:'post',
                url:'/api/laifei/orders/store',
                searchForm:{
                    trade_no:'',
                    nickname:'',
                    openid:'',
                    phone:'',
                    type:'',
                    course_id:[],
                    vip_id:[],
                    time:[],
                },
            }
        },
        created(){
            this.$store.dispatch('pageInit', this);
            this.$store.dispatch('laifei/getCourses');

        },
        methods:{

        },
    }
</script>

<style scoped>

</style>
